<template>
  <div class="shopHeader">
    <div class="header-top">
      <van-icon name="arrow-left" size="40"  color="#fff" @click="back" />
      <div class="right">
        <van-icon name="search" size="40"  color="#fff" class="van-icon"/>
        <van-icon name="star-o" size="40"  color="#fff" class="van-icon"/>
        <van-icon name="notes-o" size="40"  color="#fff" class="van-icon"/>
        <van-icon name="ellipsis" size="40" color="#fff" class="van-icon"/>
      </div>
    </div>
    <div class="bottom">
      <img src="./images/jiahe.jpg">
      <h1>如意馄饨(东湖国际店)</h1>
      <div class="b-top">
        <van-icon name="star" color="#ED8026" size="20"/>
        <span class="span1">4.6</span>
        <span class="span2">月销1529</span>
        <span class="span3">配送约40分钟</span>
      </div>
      <div class="b-middle">
        <span>20减3</span>
        <span class="s1">40减6</span>
        <span class="s1">60减8</span>
        <span class="s1">100减18</span>
        <span class="s1">新客减1</span>
        <span class="s1">7.65折起</span>
      </div>
      <div class="b-bottom">
        <span>公告:本店新开张，优惠多，欢迎光临!有要求请备注。</span>
        <van-icon name="arrow-down" size="18" class="size"/>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);
export default {
  methods:{
    back(){
      this.$router.push('/home')
    }
  }
};
</script>

<style lang="scss" scoped>
.header-top{
  height: 80px;
  width: 100%;
  background-color:#6A5B25;
  display: flex;
  padding-top: 42px;
  .right{
    margin-left:220px;
    .van-icon{
      margin-left:10px;
    }
  }
}
.bottom{
  position: relative;
  height: 110px;
  width: 100%;
  padding-top:10px;
  padding-left: 12px;
  img{
    width: 60px;
    height: 60px;
    position: absolute;
    right: 15px;
    top:-5px
  }
  h1{
    font-size: 18px;
  }
  .b-top{
    margin-top: 5px;
    .span1{
      color: #ED8026;
      margin-left: 2px;
    }
    .span2{
      font-size: 11px;
      color: #999;
      margin-left: 7px;
    }
    .span3{
      font-size: 11px;
      color: #999;
      margin-left: 7px;
    }
  }
  .b-middle{
    margin-top: 8px;
    color: #D68E82;
    span{
      border: 1px solid #f1f1f1;
      border-radius:5px ;
      padding: 1px 2px;
    }
    .s1{
      margin-left: 3px;
    }
  }
  .b-bottom{
    margin-top: 5px;
    font-size: 11px;
    color: #999;
    .size{
      margin-left: 78px;
    }
  }
}


</style>
